<template>
  <view>
    <u-navbar title="分类管理" title-size="36"></u-navbar>
    <view v-if="status == 1" class="content">
      <view class="title border_bottom"> 点击按钮直接调整移动 </view>
      <view class="view-item border_bottom" v-for="(item, index) in cateList" :key="item.key">
        <text>{{ item.name }}</text>

        <u-icon
          @click="up(item, index)"
          style="margin-right: 8rpx"
          :name="index != 0 ? `/static/img/sy2.png` : `/static/img/sy.png`"
          size="28"
        ></u-icon>
        <p @click="up(item, index)">上移</p>

        <u-icon
          @click="down(item, index)"
          style="margin: 0 8rpx 0 30rpx"
          :name="index != cateList.length - 1 ? `/static/img/xy.png` : `/static/img/xy1.png`"
          size="28"
        ></u-icon>
        <p @click="down(item, index)">下移</p>
      </view>
    </view>
    <view v-else class="content">
      <view class="title border_bottom"> 共{{ cateList.length }}个分类 </view>
      <view class="view-item border_bottom" v-for="(item, index) in cateList" :key="item.key">
        <text>{{ item.name }}</text>

        <u-icon
          @click="onEdit(item)"
          style="margin-right: 8rpx"
          name="/static/img/xg.png"
          size="28"
        ></u-icon>
        <p>修改</p>

        <u-icon
          @click="onDel(item)"
          style="margin: 0 8rpx 0 30rpx"
          name="/static/img/sc2.png"
          size="28"
        ></u-icon>
        <p>删除</p>
      </view>
    </view>

    <view v-if="status == 1" class="btn-group">
      <view class="btn cancel-btn" @click="cancel"> 返回 </view>
      <!-- <view class="btn submit-btn" @click="submit">
				保存排序
			</view> -->
    </view>
    <view v-else class="btn-group">
      <view class="btn sort-btn" @click="onSort"> 调整分类排序 </view>
      <view class="btn add-btn" @click="addCate"> +添加分类 </view>
    </view>

    <u-popup mode="center" width="550" height="355" v-model="show">
      <view class="popup-box">
        <view class="popup-title"> 添加分类 </view>
        <input v-model="form.name" class="inp" placeholder="请输入分类名称" type="text" />
        <!-- <input v-model="form.sort" class="inp" placeholder="请输入分类名称" type="text"> -->

        <view @click="submit" class="popup-btn"> 保存 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      status: 2,
      halt: false,
      cateList: [],
      form: {
        sort: '',
        name: '',
        status: 0,
        shopId: 3
      }
    }
  },
  onLoad(options) {
    this.status = options.status
  },
  onShow() {
    this.init()
  },
  methods: {
    init() {
      this.$u.get('/app-api/shop/product-category/my-list').then((res) => {
        this.cateList = res.data.sort((a, b) => a.sort - b.sort)
      })
    },
    up(e, i) {
      if (i == 0) {
        return
      }
      let s = this.cateList[i - 1]
      this.cateList.splice(i - 1, 2, e, s)
      let n = s.sort
      let m = e.sort
      e.sort = n
      this.cateList[i - 1].sort = m
      this.move(e, this.cateList[i - 1])
    },
    down(e, i) {
      if (i == this.cateList.length - 1) {
        return
      }
      let s = this.cateList[i + 1]
      this.cateList.splice(i, 2, s, e)
      let n = s.sort
      let m = e.sort
      e.sort = n
      this.cateList[i + 1].sort = m
      this.move(e, this.cateList[i + 1])
    },
    move(e, f) {
      this.$u
        .put('/app-api/shop/product-category/sort', {
          sort: [{ [e.id]: e.sort }, { [f.id]: f.sort }]
        })
        .then((res) => {
          this.$u.toast('排序成功')
        })
    },

    addCate() {
      this.form.id = ''
      this.show = true
    },
    onEdit(e) {
      this.form = e
      this.show = true
    },
    onDel(item) {
      uni.dialog.confirm('温馨提示', '是否删除分类？', () => {
        this.$u.delete('/app-api/shop/product-category/delete?id=' + item.id).then(() => {
          this.$u.toast('成功')
          this.init()
        })
      })
    },
    cancel() {
      if (this.halt) {
        this.status = 2
        return
      }
      uni.navigateBack()
    },
    onSort() {
      this.halt = true
      this.status = 1
    },
    submit() {
      if (!this.form.name) {
        this.$u.totast('请输入分类名称')
        return
      }

      if (this.form.id) {
        this.form.sort = this.cateList.length
        this.$u.put('/app-api/shop/product-category/update', this.form).then((res) => {
          this.$u.toast('成功')
          this.show = false
          this.init()
        })
      } else {
        this.form.sort = this.cateList.length
        this.$u.post('/app-api/shop/product-category/create', this.form).then((res) => {
          this.show = false
          this.$u.toast('成功')
          this.init()
        })
      }
    }
  }
}
</script>

<style>
page {
  background-color: #f7f7f7;
  padding: 20rpx;
}
.content {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.border_bottom {
  border-bottom: #ededed solid 2rpx;
}
.title {
  font-size: 30rpx;
  color: #999999;
  padding: 20rpx 0;
}
.view-item {
  padding: 20rpx 0;
  display: flex;
  align-items: center;
}
.view-item text {
  flex: 1;
}
.btn-group {
  position: fixed;
  width: 100%;
  bottom: 0rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  margin-left: -20rpx;
}
.btn {
  border-radius: 35rpx;
}
.cancel-btn {
  background-color: #f5f5f5;
  padding: 18rpx 120rpx;
}

.submit-btn {
  background-color: #0f76bc;
  padding: 18rpx 80rpx;
  color: #fff;
}
.sort-btn {
  background-color: #f5f5f5;
  padding: 18rpx 60rpx;
}
.add-btn {
  background-color: #0f76bc;
  padding: 18rpx 80rpx;
  color: #fff;
}
.popup-box {
  font-size: 30rpx;
  padding: 20rpx;
}
.popup-title {
  text-align: center;
  padding: 20rpx 0;
}
.inp {
  background-color: #f7f7f7;
  height: 55rpx;
  margin-top: 20rpx;
}
.popup-btn {
  width: 500;
  padding: 18rpx;
  background-color: #0f76bc;
  text-align: center;
  color: #fff;
  margin-top: 58rpx;
  border-radius: 8rpx;
}
</style>
